<template>
  <Navbar :title="'我的'"></Navbar>
  <div class="mine-wrap">
    <div class="mine-header">
      <div class="user-data" v-if="isLogin" @click="toUserInfo">
        <div class="img">
          <img :src="avator" alt="" />
        </div>
        <div class="detail">
          <span class="username">{{ username }}</span>
          <span class="phone">{{ userphone }}</span>
        </div>
      </div>
      <div class="loginin" v-else @click="goLoginin">
        <div class="img">
          <img src="../assets/image/unload.png" alt="" />
        </div>
        <span class="please">请登录</span>
      </div>
    </div>
    <div class="mine_header_bottom">
      <div class="prim" @click="togoDetail(1)">
        <p>积分</p>
        <h1>0</h1>
      </div>
      <div class="content"></div>
      <div class="prim" @click="togoDetail(2)">
        <p>储值卡</p>
        <h1>0</h1>
      </div>
      <div class="content"></div>
      <div class="prim" @click="togoDetail(3)">
        <p>优惠券</p>
        <h1>0</h1>
      </div>
    </div>
    <div class="content-wrap">
      <div class="content">
        <div
          class="list"
          v-for="item in Lists"
          :key="item.id"
          @click="togoList(item.path)"
        >
          <div class="img"><img :src="item.img" alt="" /></div>
          <div class="title">{{ item.title }}</div>
          <div class="detail" v-if="item.detail">{{ item.detail }}</div>
          <div class="icon" v-else><van-icon name="arrow"></van-icon></div>
        </div>
      </div>
    </div>
  </div>
  <Tabbar></Tabbar>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import Navbar from "../components/Navbar.vue";
import Tabbar from "../components/Tabbar.vue";
import { useRouter } from "vue-router";
import { onBeforeMount } from "@vue/runtime-core";
import { getLocal } from "../utils/utils";
import { Toast } from "vant";
export default {
  setup() {
    const router = useRouter();
    const state = reactive({
      isLogin: false,
      username: "",
      userphone: "",
      avator: "",
      Lists: [
        {
          title: "会员等级",
          img: require("../assets/image/huiyuan.png"),
          id: 1,
          path: "/member",
        },
        {
          title: "福利社",
          img: require("../assets/image/hongbao.png"),
          id: 2,
          path: "/welfare",
        },
        {
          title: "会员码",
          img: require("../assets/image/qrqcode.png"),
          id: 3,
          path: "/membercode",
        },
        {
          title: "积分商城",
          img: require("../assets/image/zhu.png"),
          id: 4,
          path: "/integral",
        },
        {
          title: "我的订单",
          img: require("../assets/image/icon.png"),
          id: 5,
          path: "/orderfrom",
        },
        {
          title: "收货地址",
          img: require("../assets/image/hb-address.png"),
          id: 6,
          path: "/address",
        },
        {
          title: "兑换码",
          img: require("../assets/image/gift.png"),
          id: 7,
          path: "/cdkey",
        },
        {
          title: "版本号",
          img: require("../assets/image/i.png"),
          detail: "1.00.00",
          id: 8,
        },
      ],
    });
    //点击积分储蓄卡....跳页面
    const togoDetail = (e) => {
      if (state.isLogin) {
        if (e == 1) {
          router.push("/myintegral");
        } else if (e == 2) {
          router.push("/valuecard");
        } else {
          router.push("/coupon");
        }
      } else {
        Toast.fail("未登录");
      }
    };

    //点击list 会员等级 福利社 会员码.... 跳页面
    const togoList = (e) => {
      if (state.isLogin) {
        if (e) {
          router.push(e);
        }
      } else {
        Toast.fail("未登录");
      }
    };

    //点击去登录页面
    const goLoginin = () => {
      router.push("login");
    };

    //点击去用户详情页
    const toUserInfo = () => {
      router.push("userinfo");
    };

    onBeforeMount(() => {
      state.isLogin = getLocal("token") ? true : false;
      if (state.isLogin) {
        const { uname, phone, avatar } = JSON.parse(getLocal("userinfo"));
        state.username = uname;
        state.userphone = phone;
        state.avator = require("../assets/image/avator/" + avatar);
      }
    });
    return {
      ...toRefs(state),
      togoDetail,
      togoList,
      goLoginin,
      toUserInfo,
    };
  },
  components: {
    Tabbar,
    Navbar,
  },
};
</script>

<style lang="less" scoped>
.mine-wrap {
  margin: 48px 0;
  .mine-header {
    padding: 10px 20px 0 20px;
    box-sizing: border-box;
    color: rgb(34, 34, 34);
    font-size: 15px;
    .user-data {
      display: flex;
      .img {
        height: 50px;
        width: 50px;
        margin-right: 10px;
        img {
          border-radius: 50%;
          height: 50px;
          width: 50px;
        }
      }
      .detail {
        span {
          display: block;
          margin: 5px 0;
        }
      }
    }
    .loginin {
      display: flex;
      img {
        height: 50px;
        width: 50px;
        padding-right: 10px;
        border-radius: 50%;
        img {
          height: 50px;
          width: 50px;
        }
      }
      .please {
        height: 50px;
        line-height: 50px;
        color: rgb(4, 0, 255);
      }
    }
  }
  .mine_header_bottom {
    display: flex;
    width: 100%;
    .prim {
      width: 33%;
      p {
        color: rgb(180, 180, 180);
        font-size: 16px;
        margin-top: 5px;
        margin-bottom: 0;
        text-align: center;
      }
      h1 {
        color: rgb(209, 90, 90);
        font-weight: normal;
        font-size: 26px;
        margin: 0;
        text-align: center;
      }
    }
    .content {
      background-color: rgb(216, 216, 216);
      padding: 1px;
      height: 30px;
      margin-top: 20px;
    }
  }
  .content-wrap {
    background: rgb(247, 247, 247);
    padding: 8px 0;
    .content {
      margin: 0 10px;
      background: #fff;
      border-radius: 5px;
      .list {
        display: flex;
        justify-content: space-between;
        height: 40px;
        line-height: 40px;
        padding: 5px;
        position: relative;
        border-bottom: 1px solid rgb(247, 247, 247);
        border-bottom-width: 80%;
        .img {
          width: 24px;
          height: 22px;
          margin-top: 5px;
          position: absolute;
          left: 20px;
          img {
            width: 24px;
            height: 22px;
          }
        }
        .title {
          position: absolute;
          left: 60px;
          font-size: 16px;
        }
        .icon {
          position: relative;
          left: 300px;
          bottom: 5px;
        }
        .detail {
          position: relative;
          left: 260px;
          font-size: 16px;
          color: #999;
        }
      }
    }
  }
}
</style>
<style scoped>
.van-badge__wrapper {
  font-size: 24px;
  color: #999;
  opacity: 0.5;
  height: 50px;
  line-height: 50px;
}
</style>